<template>
    <div class="main-contain">
      <!-- <div class="top-nav">
        <div class="search-div">
          <el-button type="danger" plain icon="Document" @click="toMyOrder()">我的订单</el-button>
        </div>
      </div> -->
      <div class="page-title">
        积分商城
        <!-- <el-button type="danger" plain icon="Document" @click="toMyOrder()" style="float:right;">我的订单</el-button> -->
      </div>
      <!--商品列表-->   
      <div id="tour" class="index-section">
        <figure class="product" v-for="(item,id) in productList" :key="id">
            <div class="imgd">
                <img :src="item.mainPic" v-if="item.mainPic!=''">
                <img src="http://129.211.222.131:18080/images/default.jpg" v-if="item.mainPic==null||item.mainPic==''">
            </div>
            <figcaption>
              <p class="title">
                <strong>{{ item.name }}</strong>
              </p>
              <div class="ptags">
                <!-- <el-tag v-for="(tag,i) in item.tagList" :key="i" type="primary" style="margin-right: 2px;">{{ tag }}</el-tag> -->
                <span class="sale-count">已有{{ item.saleCount }}人兑换</span>
              </div>
              <p class="profile" :title="item.subTitle">{{ item.subTitle }}</p>
              <div class="buy-div">
                <span class="price">{{item.price}}</span><span class="currency">积分</span>
                <el-button type="info" plain style="background-color:#0038a7;color:#fff;" class="buy-btn" 
                  icon="ShoppingCartFull" @click="onAddCart(item.productId)">兑换
                </el-button>
              </div>
            </figcaption>
        </figure>
      </div>
  
      <!-- 分页组件 -->
      <el-pagination background layout="prev, pager, next" v-model:page-size="queryForm.pageSize" v-model:current-page="queryForm.pageNo" :total="total" @current-change="getInfo" />
    </div>
  </template>

<script setup lang="ts">
import { ref, reactive, nextTick, toRef } from "vue";
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from "element-plus";
import { timestampToDayHM, timestampToHM, timestampToDate, formatAmount } from "@/utils/utils"
import { fileUploader } from '@/utils/upload.js'
import { useRouter, useRoute } from 'vue-router';

// 查询参数
const queryForm = reactive({
  deptName: "",
  pageNo: 1,
  pageSize: 10
});
const router = useRouter();
const route = useRoute();
// 列表内容数量
const total = ref(0);
// 列表是否加载
const loading = ref(true);
// 列表返回值
const list = ref<any[]>([]);

// 表单实例
const formRef = ref();
// 是否打开弹出框
const open = ref(false);
const openDetail = ref(false);
// 弹出框标题
const title = ref("");
const productList = ref<any[]>([]);
const slidePics = ref();
const shopId = ref();

// 表单验证
const rules = ref({
  deptName: [{ required: true, message: "规则名称不能为空", trigger: "blur" }],
});

function goBack(){
  router.back()
}

const getInfo = () => {
  const cid = route.query.cid
  console.log('从路由获取参数：', route.query)
  // shopId.value = infoId
  // loading.value = true;
  // baseService.get(`/admin/product/info/${infoId}`).then((res) => {
  //   console.log('获取商品信息：',res)
  //   product.value = res.data
  //   loading.value = false;
  // }).catch(() => {
  //   loading.value = false;
  // });
    let req = {category: cid}
    baseService.post(`/api/product/list`, req).then((res) => {
        console.log('获取产品列表：',res)
        productList.value = res.data.records;
        total.value = res.data.totalrecord;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
}

const toMyOrder = ()=>{
  router.push("/order/my/list");
}

//加入购物车
const onAddCart = (pid: number) => {
    let req = {productId: pid}
    router.push("/order/confirm?pid="+pid);
}

getInfo();
</script>

<style scoped>
.margin-top{
  width: 80%;
  margin: 0 auto;
}
.userRole {
  width: 100%;
}
.comm-item{
    width: 30%;
}

.show-btn{
  text-align: center;
  margin: 10px 0 30px 0;
}
.el-tag{
  margin-right: 4px;
}
.data-list{
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  width: 1024px;
}
.data-list .item{
  width: 300px;
  border: 1px solid #ccc;
  padding: 15px 0;
  box-shadow: 2px 2px 8px #ccc;
  box-sizing: border-box;
  margin: 18px 20px;
  transition: transform 0.3s ease; 
}
.item:hover {
  transform: scale(1.1);
}
.data-list .item img{
  width: 280px;
  height: 240px;
}
.data-list .item .content{
  display: inline-block;
  padding: 10px 20px 0 20px;
  width: 100%;
  box-sizing: border-box;
}
.item .item-pic{
  width: 100%;
  text-align: center;
}
.data-list .item .book{
  width: 15%;
  float: right;
  text-align: center;
  margin-top: 15px;
}
.item .content .title{
  margin: 0 0 8px 0;
  color: #666;
  font-size: 20px;
}
.data-list .item .content:hover{
  cursor: pointer;
}
.data-list .item img:hover{
  cursor: pointer;
}
.content .desc{
  margin: 8px 0;
  font-size: 14px;
  color: #666;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desc .ptime{
  float: right;
  color: #999;
}
.clear{
  clear: both;
}
.desc .el-icon-user{
  font-size: 16px;
}
.desc .ptime{
  font-size: 12px;
  padding-top: 2px;
}
.index-section .center p {
	color: #666;
	margin: 10px 0;
}
.index-section figure {
	border: 1px solid #ddd;
	display: inline-block;
	padding: 2px;
	border-radius: 4px;
	margin: 15px 10px;
	width: 480px;
	text-align: left;
	position: relative;
	overflow: hidden;
}
.index-section figure .imgd{
    height: 200px;
    overflow: hidden;
    float: left;
}
.index-section figure img {
	vertical-align: middle;
	width: 245px;
    height: auto;
    cursor: pointer;
}
.index-section figcaption {
	color: #777;
	line-height: 1.5;
  float: right;
	letter-spacing: 1px;
	font-size: 14px;
  width: 210px;
	padding: 7px 8px 5px 0;
}
.index-section .info {
	padding: 5px 0 0 0;
    height: 45px;
}
.index-section .title {
	color: #666;
	font-weight: bold;
	font-size: 16px;
    padding: 0 5px;
    margin: 5px 0;
    cursor: pointer;
}
.index-section .title:HOVER{
    color: #d77f57;
}
.index-section .artist{
	color: #26a4ed;
	padding: 5px;
	border-bottom: .5px solid #ddd;
    margin-bottom: 8px;
}
.index-section .mpd{
	float: right;
	color: #999;
}
.index-section .profile{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;    
    height: 65px;
    margin-top: 0;
}
.ptags{
  margin-bottom: 4px;
}
.ptags .sale-count{
  
}
.index-section .price {
	color: #f60;
	font-size: 14px;
}
.index-section .detail{
	text-align: left;
	padding: 12px 130px;
}
.index-section .price strong {
	font-size: 20px;
	letter-spacing: 1px;
}
.index-section .type {
	width: 110px;
    height: 40px;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background-color: #59b200;
    position: absolute;
    transform: rotate(45deg);
    top: -5px;
    right: -40px;
}
.index-section .type-2{
	background-color: #f90;
}
.index-section .type-3{
	background-color: #4d89db;
}
.global-search{
	width: 860px;
	margin: 0 auto;
	padding-bottom: 20px;
}
.index-section .product{
  box-sizing: border-box;
  padding: 5px;
  clear: both;
  border: 1px solid #e79083;
}
.product .buy-div{
  margin-top: 15px;
}
.product .buy-div .price{
	color: #e4393c;
	font-size: 18px;
}
.product .buy-div .currency{
	font-size: 12px;
}
.catagory .item:HOVER{
	background-color: #458b00;
	color: #fff;
}
.buy-div .buy-btn{
    float: right;
}
.search-div{
  margin-top: 15px;
  padding-left: 10px;
}
.page-title{
    font-size: 16px;
    font-weight: bold;
    color: #0038a7;
    padding-left: 5px;
    border-left: 3px solid #0038a7;
    margin: 15px 0 4px 15px;
  }
</style>